<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right"> <!---(item.id,curId)-->
        <span @click="changeTab(item.id)" v-for="(item,index) in items" :key="item.id" :class="{active : index===curId}">{{item.label}}</span>
      </div>
    </div>
    <div class="content-wrap">
      <div v-if="curId===0" class="chart-content" ref="hospitalBusiness1">
        2019
      </div>
      <div v-if="curId===1" class="chart-content" ref="hospitalBusiness2">
        2020
      </div>
      <div v-if="curId===2" class="chart-content" ref="hospitalBusiness3">
        2021
      </div>

    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'

import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-multi-analysis2-zhuyuanyewu',
  components:{Fragment},
  props:{
    items:{
      type:Array
    },
    title:{
      type:String
    }
  },
  data(){
    return{
      curId:0,
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    changeTab(id){
      this.curId=id
    },
    makeData(){
      // 入院总人次
      const data8 = [
        {name: '1', value: 90,label:'医疗机构'},
        {name: '2', value: 92,label:'医疗机构'},
        {name: '3', value: 88,label:'医疗机构'},
        {name: '4', value: 76,label:'医疗机构'},
        {name: '5', value: 65,label:'医疗机构'},
        {name: '6', value: 60,label:'医疗机构'},
        {name: '7', value: 90,label:'医疗机构'},
        {name: '8', value: 92,label:'医疗机构'},
        {name: '9', value: 88,label:'医疗机构'},
        {name: '10', value: 76,label:'医疗机构'},
        {name: '11', value: 65,label:'医疗机构'},
        {name: '12', value: 60,label:'医疗机构'}
      ]
      const option8 = {
          grid: {
            left: '-10%',
            right: '0%',
            bottom: '-4%',
            top:'3%',
            containLabel: true
          },
          xAxis: {
            show: false,
          },
          yAxis: [{
            type: 'category',
            data: data8.map(item =>item.name),
            axisLine: {
              show: false
            },
            inverse: true,
            interval:1,
            axisTick: {
              show: false
            },
            axisLabel:{
              color:'#eeeeee',
              formatter:function(value,index){
                return '{idx' + '|' +  value + '}'
              },
              rich: {
                idx: {
                    color: '#ffffff',
                    backgroundColor: '#2699EB',
                    borderRadius: 100,
                    padding: [5,8],                    
                }
              }
            },
          },{
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            offset: -15,
            zlevel: 100,
            show: true,
            position: "left",
           
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                // fontSize: "10"
                align:'left'
              }
            },
            data: data8.map(item => item.label)
          }],
          series: [
            {
              name: '2011',
              type: 'bar',
              data: data8,
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(20, 50, 89, 1)',
                borderRadius: [0, 50, 50, 0]
              },
              barWidth: 20,
              itemStyle: {
                emphasis:{
                  barBorderRadius:5
                },
                normal: {
                    barBorderRadius: 40,
                    color:new echarts.graphic.LinearGradient(1,1,0,0,[{
                      offset:0,
                      color:"#34AAEF"
                    },
                    {
                      offset:1,
                      color:"#0240D0"
                    }],false)
                }
              },
              label: {
                show: true,
                position: 'right',
                color: 'white',
                formatter: '{c} 人' 
              }
            },
            
          ]
      };
      this.makeGraph(this.$refs.hospitalBusiness1,option8)
      // 出院总人次
      const data9 = [
        {name: '1', value: 80,label:'医疗机构'},
        {name: '2', value: 82,label:'医疗机构'},
        {name: '3', value: 78,label:'医疗机构'},
        {name: '4', value: 66,label:'医疗机构'},
        {name: '5', value: 55,label:'医疗机构'},
        {name: '6', value: 50,label:'医疗机构'},
        {name: '7', value: 80,label:'医疗机构'},
        {name: '8', value: 82,label:'医疗机构'},
        {name: '9', value: 78,label:'医疗机构'},
        {name: '10', value: 66,label:'医疗机构'},
        {name: '11', value: 55,label:'医疗机构'},
        {name: '12', value: 50,label:'医疗机构'}
      ]
      const option9 = {
          grid: {
            left: '-10%',
            right: '0%',
            bottom: '-4%',
            top:'3%',
            containLabel: true
          },
          xAxis: {
            show: false,
          },
          yAxis: [{
            type: 'category',
            data: data9.map(item =>item.name),
            axisLine: {
              show: false
            },
            inverse: true,
            interval:1,
            axisTick: {
              show: false
            },
            axisLabel:{
              color:'#eeeeee',
              formatter:function(value,index){
                return '{idx' + '|' +  value + '}'
              },
              rich: {
                idx: {
                    color: '#ffffff',
                    backgroundColor: '#2699EB',
                    borderRadius: 100,
                    padding: [5,8],                    
                }
              }
            },
          },{
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            offset: -15,
            zlevel: 100,
            show: true,
            position: "left",
           
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                // fontSize: "10"
                align:'left'
              }
            },
            data: data9.map(item => item.label)
          }],
          series: [
            {
              name: '2011',
              type: 'bar',
              data: data9,
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(20, 50, 89, 1)',
                borderRadius: [0, 50, 50, 0]
              },
              barWidth: 20,
              itemStyle: {
                emphasis:{
                  barBorderRadius:5
                },
                normal: {
                    barBorderRadius: 40,
                    color:new echarts.graphic.LinearGradient(1,1,0,0,[{
                      offset:0,
                      color:"#34AAEF"
                    },
                    {
                      offset:1,
                      color:"#0240D0"
                    }],false)
                }
              },
              label: {
                show: true,
                position: 'right',
                color: 'white',
                formatter: '{c} 人' 
              }
            },
            
          ]
      };
      this.makeGraph(this.$refs.hospitalBusiness2,option9)
      // 住院总收入
      const data10 = [
        {name: '1', value: 100,label:'医疗机构'},
        {name: '2', value: 102,label:'医疗机构'},
        {name: '3', value: 98,label:'医疗机构'},
        {name: '4', value: 86,label:'医疗机构'},
        {name: '5', value: 75,label:'医疗机构'},
        {name: '6', value: 70,label:'医疗机构'},
        {name: '7', value: 100,label:'医疗机构'},
        {name: '8', value: 102,label:'医疗机构'},
        {name: '9', value: 98,label:'医疗机构'},
        {name: '10', value: 86,label:'医疗机构'},
        {name: '11', value: 75,label:'医疗机构'},
        {name: '12', value: 70,label:'医疗机构'}
      ]
      const option10 = {
          grid: {
            left: '-10%',
            right: '0%',
            bottom: '-4%',
            top:'3%',
            containLabel: true
          },
          xAxis: {
            show: false,
          },
          yAxis: [{
            type: 'category',
            data: data10.map(item =>item.name),
            axisLine: {
              show: false
            },
            inverse: true,
            interval:1,
            axisTick: {
              show: false
            },
            axisLabel:{
              color:'#eeeeee',
              formatter:function(value,index){
                return '{idx' + '|' +  value + '}'
              },
              rich: {
                idx: {
                    color: '#ffffff',
                    backgroundColor: '#2699EB',
                    borderRadius: 100,
                    padding: [5,8],                    
                }
              }
            },
          },{
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            offset: -15,
            zlevel: 100,
            show: true,
            position: "left",
           
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                // fontSize: "10"
                align:'left'
              }
            },
            data: data10.map(item => item.label)
          }],
          series: [
            {
              name: '2011',
              type: 'bar',
              data: data10,
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(20, 50, 89, 1)',
                borderRadius: [0, 50, 50, 0]
              },
              barWidth: 20,
              itemStyle: {
                emphasis:{
                  barBorderRadius:5
                },
                normal: {
                    barBorderRadius: 40,
                    color:new echarts.graphic.LinearGradient(1,1,0,0,[{
                      offset:0,
                      color:"#34AAEF"
                    },
                    {
                      offset:1,
                      color:"#0240D0"
                    }],false)
                }
              },
              label: {
                show: true,
                position: 'right',
                color: 'white',
                formatter: '{c} 人' 
              }
            },
            
          ]
      };
      this.makeGraph(this.$refs.hospitalBusiness3,option10)
    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .1rem;
        font-size: .11rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .1rem;
      }
    }
  }
  .content-wrap{
    
    height:calc( (100vh - 1.23rem) *2 / 3 - .36rem) ;
    .chart-content{
      width: 99%;
    margin-right: 1%;
      height:calc( (100vh - 1.23rem) *2 / 3 - .36rem) ;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>